//  批量任务进度条

import React, { Fragment } from 'react';
import { CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons';
import { Modal, Progress, Button } from 'antd';
import Result from '@/components/Result';
import downloadFile from '@/utils/utils';
import styles from '@/utils/utils.less';

class TaskProgress extends React.PureComponent {
  // 关闭弹框
  closeModal = () => {
    const { handleProgressModalVisible, closeModalCallBack } = this.props;
    handleProgressModalVisible(false);
    if (closeModalCallBack) {
      closeModalCallBack();
    }
  };

  render() {
    const {
      progressTitle = '任务进度',
      progressPercent,
      progressVisible,
      isShowResult,
      resultInfo,
      maskClosable = true,
      isDownload = true,
    } = this.props;

    const information = (
      <div className={styles.resultInfo} style={{ lineHeight: '32px' }}>
        {resultInfo.errorCount > 0 && (
          <h3 style={{ fontWeight: 'bolder' }}>您提交的内容存在异常：</h3>
        )}
        {resultInfo.batchName && (
          <div>
            <span span={4} className={styles.label}>
              任务名称：{resultInfo.batchName}
            </span>
          </div>
        )}
        <div>
          <span span={4} className={styles.label}>
            任务总数：{resultInfo.taskCount}条
          </span>
        </div>
        <div>
          <span span={4} className={styles.label}>
            <CheckCircleFilled style={{ marginRight: 5, color: '#52c41a' }} />
            成功数据：{resultInfo.successCount}条
          </span>
        </div>
        {resultInfo.errorCount > 0 && (
          <div>
            <span span={4} className={styles.label}>
              <CloseCircleFilled style={{ marginRight: 5, color: 'red' }} />
              失败数据：
              {resultInfo.errorCount}条
            </span>
            {isDownload && (
              <a onClick={() => downloadFile(resultInfo.errorParams, resultInfo.errorUrl, 'POST')}>
                下载错误数据
              </a>
            )}
          </div>
        )}
      </div>
    );
    const actions = (
      <Fragment>
        <Button type="primary" onClick={this.closeModal}>
          关闭
        </Button>
      </Fragment>
    );
    return (
      <Modal
        title={isShowResult ? `${progressTitle}结果` : progressTitle}
        footer={null}
        closable={false}
        visible={progressVisible}
        onCancel={this.closeModal}
        maskClosable={maskClosable}
      >
        <div style={{ textAlign: 'center' }}>
          {isShowResult ? (
            <Result
              type={resultInfo.errorCount ? null : 'success'}
              title={resultInfo.errorCount ? null : '操作成功'}
              extra={information}
              actions={actions}
              className={styles.result}
            />
          ) : (
            <div>
              <Progress
                percent={progressPercent}
                format={percent => `${percent}%`}
                style={{ paddingRight: 24, marginBottom: 20 }}
              />
              {(maskClosable || isShowResult) && <Button onClick={this.closeModal}>关闭</Button>}
            </div>
          )}
        </div>
      </Modal>
    );
  }
}

export default TaskProgress;
